<template>
	<s-layout title="寄件" class="mail-wrap">
		<view class="container">
			<view class="card p-4 my-3">
				<s-notice-swiper :data="[sheep.$store('app').noticeText]" @onClick="sheep.$router.go('/pages/mail/notice')" />
			</view>
			<!-- <view class="tab-box">
				<view class="tab" :class="{active: current == 1}" @tap="onChange(1)">
					寄快递
				</view>
				<view class="tab" :class="{active: current == 2}" @tap="onChange(2)">
					批量寄件
				</view>
			</view> -->
			<view class="card mail-info my-3">
				<view class="sending">
					<view class="icon">寄</view>
					<view class="ss-flex-col ss-flex-1 pr-2" @tap="toAddPage(1)">
						<template v-if="shippingInfo">
							<text class="basic">
								<text class="mr-2">{{shippingInfo.consignee}}</text>
								<text>{{shippingInfo.mobile}}</text>
							</text>
							<text class="address">
								<text class="mr-2">{{shippingInfo.area}}</text>
								<text>{{shippingInfo.address}}</text>
							</text>
							
						</template>
						<template v-else>
							<text class="basic">寄件人信息</text>
							<text class="address">请输入您的寄件地址信息</text>
						</template>
					</view>
					<view class="book" @tap="toAddressBook(0)">地址薄</view>
				</view>
				<view class="receiving" v-if="current == 1">
					<view class="icon">收</view>
					<view class="ss-flex-col ss-flex-1 pr-2" @tap="toAddPage(2)">
						<template v-if="receivingInfo">
							<text class="basic">
								<text class="mr-2">{{receivingInfo.consignee}}</text>
								<text>{{receivingInfo.mobile}}</text>
							</text>
							<text class="address">
								<text class="mr-2">{{receivingInfo.area}}</text>
								<text>{{receivingInfo.address}}</text>
							</text>
							
						</template>
						<template v-else>
							<text class="basic">收件人信息</text>
							<text class="address">请输入您的收件地址信息</text>
						</template>
					</view>
					<view class="book" @tap="toAddressBook(1)">地址薄</view>
				</view>
				<!-- <view v-for="(item, index) in recipientList" :key="item.id" class="receiving" v-else>
					<view class="icon">收{{index+1}}</view>
					<view class="ss-flex-col ss-flex-1 pr-2" @tap="toAddressBook(1)">
						<text class="basic">收件人信息</text>
						<text class="address">请输入您的收件地址信息</text>
					</view>
					<view class="book">
						<text class="_icon-delete-o" @tap="handleDel(item.id)"></text>
						<text @tap="toAddressBook(1)">地址薄</text>
					</view>
				</view> -->
				<!-- <view v-show="current == 2" class="package2 package-box">
					<view class="ss-flex ss-row-between">
						<text class="label">包裹信息<text class="require">(必填)</text></text>
						<view class="option" @tap="toPackageInfo">
							请选择
							<text class="cicon-forward"></text>
						</view>
					</view>
					<view class="ss-flex ss-row-between">
						<text class="label">上门时间</text>
						<view class="option" @tap="visible = true">
							{{ dateTime || '请选择' }}
							<text class="cicon-forward"></text>
						</view>
					</view>
				</view> -->
			</view>
			<view class="card tip p-3 my-3">
				请务必认真填写收寄件人信息，如出现因信息错误导致快件无法准确送达，责任由寄件人自行承担
			</view>
			
			<view v-if="current == 1" class="card package1 package-box my-3 p-4">
				<view class="ss-flex ss-row-between">
					<text class="label">上门时间</text>
					<view class="option" @tap="visible = true">
						{{ dateTime || '请选择' }}
						<text class="cicon-forward"></text>
					</view>
				</view>
				<view class="ss-flex ss-row-between">
					<text class="label">包裹信息<text class="require">(必填)</text></text>
					<view class="option" @tap="toPackageInfo">
						{{ packageInfo.itemName }}，{{ packageInfo.weight }}KG
						<text class="cicon-forward"></text>
					</view>
				</view>
				<view class="tip">
					请务必选择包裹然后才会显示价格哦！！！如果没有快递员来取件，可以去我的中寄件订单主动给快递员打电话哦！下午五点半以后的订单可能会延至第二天哦！寄件不成功的话，请更换别的快递！！！
				</view>
			</view>
			
			<!-- <view v-else class="add-box" @tap="handleAdd">+添加收件人</view> -->
			
			<view v-if="list.length" class="card express-delivery my-3">
				<view class="title">
					选择快递
					<text class="tip">（建议选择平时取件率高的快递）</text>
				</view>
				<view class="express-delivery-list">
					<view
						v-for="item in list"
						:key="item.channelId"
						class="express-delivery-item"
						:class="{'active': item.channelId == active.channelId}"
						@tap="onClick(item)"
					>
						<view class="ss-flex mb-2">
							<image class="logo" :src="item.channelLogoUrl"></image>
							<text class="name">{{ item.tagType }}</text>
							<text class="tip">{{ item.channel }}</text>
						</view>
						<view class="ss-flex baseline">
							<text class="price">¥ <text class="num">{{ item.totalFreight }}</text></text>
							<text class="priceMore">续重¥<text class="red">{{ item.priceMore }}</text>/kg</text>
							<text class="original" v-if="item.originalPrice">官网原价¥{{ item.originalPrice }}</text>
							
						</view>
						
							<view v-if="userinfo.zhekou>=100" class="ss-flex baseline">
						         <text class="original">会员价：¥{{(userinfo.zuigaozhekou* item.totalFreight/100).toFixed(2)}}</text>	
								 <view @click="shengji" class="openvip">升级会员</view>
							</view>
							<view v-else class="ss-flex baseline">
								<text class="priceMore">会员优惠：-¥{{((100-userinfo.zhekou)*item.totalFreight/100).toFixed(2)}}</text>
								</view>
						<view class="selected">
							✔
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="ss-flex mb-2">
				<view class="left-box">
					<view class="price">预计：{{ (active.totalFreight*(userinfo.zhekou/100)).toFixed(2) }}元</view>
					<view class="tip mb-1">
						正确设置寄收地址和物品信息才会出现价格哦，实际以官方价格为准
					</view>
				</view>
				<button class="button" @tap="onSubmit">提交</button>
			</view>
			<view class="agreement ss-flex">
				<uni-data-checkbox selectedColor="#45be93" multiple v-model="checkbox" :localdata="range"></uni-data-checkbox>
				<navigator url="/pages/public/richtext?id=4">
					<text class="blue">《寄件服务协议》</text>
				</navigator>
			</view>
			
		</view>
		<s-popup-picker v-model:visible="visible" :column-data="columnData" @change="onChange" @confirm="onConfirm" />
	</s-layout>
</template>

<script setup>
	import { ref, toRefs, watchEffect } from 'vue'
	import sheep from '@/sheep';
  import { onShow } from '@dcloudio/uni-app';
	const { shippingInfo, receivingInfo, receivingInfoList, packageInfo } = toRefs(sheep.$store('mail'))

	const checkbox = ref([])
	const range = [{ value: 1, text: "我愿意遵守平台协议" }]
	const active = ref({
		totalFreight: '0.00'
	})
	const list = ref([])
	let params = null
	const columnData = [
		['今天', '明天', '后天'],
		[
			'09:00-11:00',
			'11:00-13:00',
			'13:00-15:00',
			'15:00-17:00',
			'17:00-19:00'
		]
	]
	const dateTime = ref('') // 上门时间
	const visible = ref(false)
	const current = ref(1) // 当前tab
	const recipientList = ref([{id: 1}])
	
	
	const userinfo=sheep.$store('user').userInfo;
	
	function timeComparison (end_time) {
		const date = new Date();
		const start_time = date.getHours()
		if (start_time >= end_time) {
			return true
		}
		return false
	}
	timeComparison(17) && columnData[0].shift()
	
	const onClick = (item) => {
		active.value = item
	}
	
	const shengji=()=>{
		uni.navigateTo({
			url:"/pages/commission/goods"
		})
	}
	const onConfirm = (value) => {
		dateTime.value = value.join('，')
		visible.value = false
	}
	const toAddressBook = (type) => {
		sheep.$router.go('/pages/mail/address-book', { type })
	}
	const toPackageInfo = () => {
		sheep.$router.go('/pages/mail/package-info')
	}
	const toAddPage = (type) => {
		sheep.$router.go('/pages/mail/add-address', { type })
	}
	const onChange = (val) => {
		let arr = [
			'09:00-11:00',
			'11:00-13:00',
			'13:00-15:00',
			'15:00-17:00',
			'17:00-19:00'
		]
		// current.value = val
		if (columnData[0].length == 3 && val[0] == 0) {
			timeComparison(9) && arr.shift()
			timeComparison(11) && arr.shift()
			timeComparison(13) && arr.shift()
			timeComparison(15) && arr.shift()
		}
		columnData[1] = arr
	}
	onChange([0])
	const handleAdd = () => {
		sheep.$router.go('/pages/mail/address-book', { type: 1 })
	}
	const handleDel = (id) => {
		const index = recipientList.value.findIndex(e => e.id = id)
		recipientList.value.splice(index, 1)
	}
	const onSubmit = async () => {
		if (!params) {
			uni.showToast({
			  title: '请填写地址',
			  icon: 'none',
			});
			return
		}
		if (!dateTime.value) {
			uni.showToast({
			  title: '请选择上门时间',
			  icon: 'none',
			});
			return
		}
		if (!active.value.channelId) {
			uni.showToast({
			  title: '请选择快递',
			  icon: 'none',
			});
			return
		}
		if (!checkbox.value[0]) {
			uni.showToast({
			  title: '请同意寄件承诺',
			  icon: 'none',
			});
			return
		}
		const arr = dateTime.value.split('，')
		const index = columnData[0].findIndex(item => item == arr[0])
		
		const { data } = await sheep.$api.mail.query({
			...params,
			jkty: 2,
			channelId: active.value.channelId,
			pickupStartTime: [index, arr[1]].join()
		})
		sheep.$router.redirect('/pages/pay/index', {
			orderSN: data.order_sn,
		});
	}
	watchEffect(async () => {
		const s = shippingInfo.value
		const r = receivingInfo.value
		if (s && r) {
			params = {
				sender: s.consignee,
				senderMobile: s.mobile,
				senderCity: s.city_name,
				senderCounty: s.district_name,
				senderProvince: s.province_name,
				senderTown: '',
				senderLocation: s.address,
				senderAddress: s.area.replaceAll('-', '') + s.address,
				receiver: r.consignee,
				receiverMobile: r.mobile,
				receiveCity: r.city_name,
				receiveCounty: r.district_name,
				receiveProvince: r.province_name,
				receiveTown: '',
				receiveLocation: r.address,
				receiveAddress: r.area.replaceAll('-', '') + r.address,
				...packageInfo.value
			}
			const { code, data } = await sheep.$api.mail.query({
				...params,
				jkty: 1,
				channelId: '',
			})
			if (code == 1) {
				list.value = data.result || []
			}
		}
	})
</script>

<style lang="scss" scoped>
	.openvip{
	       height: 40rpx;
	       line-height: 40rpx;
	       font-size: 24rpx;
	       background: #000;
	       color: #FFFF00;
	       float: left;
	       width: 144rpx;
	       text-align: center;
	       border-radius: 10rpx;
	       margin-left: 10rpx;
	}
	.container {
		width: 95%;
		margin: 0 auto;
		padding-bottom: 240rpx;
	}
	.tab-box {
		display: flex;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-radius: 20rpx;
		background-color: #fff;
		color: #9d9d9d;
		font-size: 32rpx;
		overflow: hidden;
		.tab {
			flex: 1;
		}
		.active {
			background-color: #0396ff;
			color: #fff;
			font-weight: 600;
		}
	}
	.mail-info {
		.sending, .receiving {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 36rpx 0;
			.icon {
				width: 60rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				border-radius: 50%;
				font-size: 32rpx;
				margin: 0 40rpx;
				color: #fff;
			}
			.basic {
				color: #000;
				font-size: 32rpx;
				font-weight: 600;
				margin-bottom: 10rpx;
			}
			.address {
				font-size: 28rpx;
				color: #9d9d9d;
			}
			.book {
				display: flex;
				flex-direction: column;
				align-items: center;
				row-gap: 10rpx;
				padding: 0 34rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #666666;
				border-left: 2rpx solid #eeeeee;
				._icon-delete-o {
					font-weight: normal;
					color: #9d9d9d;
				}
			}
		}
		.sending {
			.icon {
				background-color: #0396ff;
			}
		}
		.receiving {
			.icon {
				background-color: #000000;
			}
		}
	}
	.tip {
		font-size: 24rpx;
		color: #999999;
	}
	.add-box {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		color: #000;
		font-size: 32rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-weight: 600;
		border-radius: 20rpx;
	}
	.package-box {
		&.package1 > .ss-flex {
			margin-bottom: 40rpx;
		}
		&.package2 > .ss-flex {
			padding: 30rpx 24rpx;
			&:last-child {
				border-top: 2rpx solid #eeeeee;
			}
		}
		.label {
			color: #2c2c2c;
			font-size: 32rpx;
			.require {
				color: red;
				font-size: 24rpx;
			}
		}
		.option {
			color: #000;
			font-weight: 600;
			font-size: 32rpx;
		}
	}
	.footer {
		position: fixed;
		bottom: 0;
		background-color: #fff;
		padding: 16rpx 10rpx 60rpx 30rpx;
		.price {
			color: red;
			margin-bottom: 6rpx;
		}
		.agreement {
			color: #999999;
			:deep(.checklist-box) {
				margin: 0;
			}
			.blue {
				color: #4791ff;
			}
		}
		.button {
			width: 300rpx;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 36rpx;
			color: #fff;
			border-radius: 88rpx;
			background-color: #0396ff;
			outline: none;
			border: none;
		}
	}
	.express-delivery {
		padding: 40rpx 30rpx;
		font-size: 32rpx;
		color: #000000;
		.title {
			margin-bottom: 40rpx;
			.tip {
				font-size: 28rpx;
			}
		}
		&-list {
			display: flex;
			flex-direction: column;
			row-gap: 20rpx;
		}
		&-item {
			position: relative;
			padding: 25rpx 30rpx;
			background-color: #f5f8ff;
			border: 2rpx solid transparent;
			border-radius: 20rpx;
			overflow: hidden;
			&.active {
				border-color: #0396ff;
				.selected {
					visibility: visible;
				}
			}
			.baseline {
				align-items: baseline;
			}
			.selected {
				position: absolute;
				right: 0;
				top: 0;
				color: #fff;
				background-color: #0396ff;
				border-bottom-left-radius: 16rpx;
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				visibility: hidden;
				font-size: 24rpx;
			}
			.logo {
				width: 40rpx;
				height: 40rpx;
				border-radius: 10rpx;
			}
			.name, .tip, .original {
				margin-left: 10rpx
			}
			.price {
				color: red;
				.num {
					font-size: 40rpx;
					font-weight: 600;
				}
			}
			.priceMore {
				font-size: 24rpx;
				color: #999999;
				margin-left: 10rpx;
				.red {
					color: red;
				}
			}
			.original {
				font-size: 30rpx;
				font-style: oblique;
				text-decoration: line-through;
				color: #6b6968;
				font-weight: 600;
			}
			.tags {
				display: inline-flex;
				color: #ff6600;
				font-size: 24rpx;
				.tag {
					padding: 4rpx 10rpx;
					border: 2rpx solid #ff6600;
					border-radius: 30rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>